<template>
  <div>
    <div>{{ count }}</div>
    <a-button type="primary" @click="add">新增</a-button>
  </div>
</template>

<script setup>
import {testStore} from "@/store/test/index.js";
import {storeToRefs} from "pinia";
import {computed} from "vue";

// 获取store
const store = testStore();

// // 方式一：获取count，此方式获取到的count失去响应性
// // 获取store里面的count
// const {count} = store;
// // 按钮点击事件，给count添加数据

// // 方式二：此方式解决方式一失去响应性问题
// const {count} = storeToRefs(store);

// 方式三：通过计算属性获取
const count = computed(() => {
  return store.getCount;
})

const add = () => {
  // 方式一
  // store.setCount();

  // 方式二
  // store.$patch({
  //   count: store.count + 10
  // })

  // 方式三
  store.$patch(state => {
    state.count = state.count + 20;
  })
}
</script>

<style scoped lang="scss">

</style>
